<template>
  <div class="limitdiv">
    <div style="margin: 20px;"></div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :rules="rules"
      ref="worker"
      class="demo-ruleForm"
      :model="worker"
    >
      <el-form-item label="工人ID">
        <el-input v-model="worker.workerId" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="工人密码">
        <el-input v-model="worker.workerPw" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="工人姓名" prop="workerName">
        <el-input v-model="worker.workerName"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="workerPhone">
        <el-input v-model="worker.workerPhone"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="工人部门" prop="workerDepartment">
              <el-select v-model="worker.workerDepartment" placeholder="请选择工人部门">
                <el-option label="维修" value="维修"></el-option>
                <el-option label="安全检查" value="安全检查"></el-option>
                <el-option label="派工" value="派工"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="工人性别" prop="workerSex">
              <el-select v-model="worker.workerSex" placeholder="请选择工人性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-form-item label="工人年龄">
        <el-input v-model="worker.workerAge"></el-input>
      </el-form-item>
      <el-form-item label="工人星级">
        <el-input v-model="worker.workerStar" readonly disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('worker')">确认修改</el-button>
        <el-button type="primary" @click="turnback" plain>返 回</el-button>
        <!-- <el-button @click="resetForm('worker')">重 置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      worker: {
        workerId: "",
        workerPw:'',
        workerDepartment: "",
        workerName: "",
        workerSex: "",
        workerAge: '',
        workerPhone: "",
        workerStar: ""
      },
      rules: {
        workerName: [
          { required: true, message: "请输入工人姓名", trigger: "blur" }
        ],
        workerPhone: [
          { required: true, message: "请输入访客联系方式", trigger: "blur" },
          {
            pattern:
              "^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\\d{8}$",
            message: "仅支持中国大陆手机号"
          }
        ],
        workerDepartment: [
          { required: true, message: "请选择工人部门", trigger: "change" }
        ],
        workerSex: [
          { required: true, message: "请选择工人性别", trigger: "change" }
        ]
      }
    };
  },
  created(){
    this.worker.workerId=this.$route.query.id;
    this.axios.post("worker/detailworker?workerId="+this.worker.workerId)
    .then(res => {
      this.worker=res.data;
      console.log(res)
    })
    .catch(err => {
      console.error(err); 
    })    
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.worker); //访客数据
          this.axios
            .post("worker/a&dworker", this.worker)
            .then(res => {
              if (res.data == "success") {
                this.$alert("修改成功！", {
                  confirmButtonText: "确定",
                  callback: action => {
                    this.$router.push("/index_manager/workerhead");
                  }
                });
              } else {
                this.$alert("修改失败！", {
                  confirmButtonText: "确定"
                });
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    turnback(){
      this.$router.push("workerhead/showworker");
    }
  },
  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
